<template>
  <section class="manage-section">
    <section class="section_main">
      <!--      <section class="section_main_top">-->
      <!--        <div>-->
      <!--          <el-button size="mini" class="el-bule-button" @click="openDialog('add')">新增</el-button>-->
      <!--          <el-button size="mini" class="el-bule-button" @click="handleArrDelete">批量删除</el-button>-->
      <!--        </div>-->
      <!--      </section>-->
      <div class="block" style="float: right">
        <el-form :inline="true"  class="demo-form-inline" style="margin-left: 50px; margin-top: 20px">
          <el-select v-model="option" placeholder="selected by ..." style="width: 150px; border: none;margin-right: 30px">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
          <el-form-item>
            <el-input prefix-icon="el-icon-search" placeholder="keywords" v-model="input"> </el-input>
          </el-form-item>
          <el-button class="el-blue-button" @click="searchItem()"><i class="el-icon-search"></i> &nbsp;查询</el-button>
          <el-button class="el-blue-button" style="float: right;margin-right: 33px" @click="goview('新增风采')"><i class="el-icon-plus"></i>&nbsp;新增</el-button>
        </el-form>
      </div>
      <section class="section_main_table">
        <el-table
          :data="tableData"
          height="80vh"
          v-loading="loading">
          <el-table-column v-if="isSelection" type="selection" width="55"></el-table-column>

          <el-table-column v-if="isIndex" type="index" label="序号" width="80" align="center"></el-table-column>

          <template v-for="item in tableColumn">
            <slot v-if="item.slot" :name="item.slot"></slot>

            <el-table-column
              v-else
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
          </template>
<!--          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>-->
<!--          <el-table-column prop="date" label="日期" align="center" width="128"></el-table-column>-->
<!--          <el-table-column prop="wagonNumber" label="车牌号" align="center" width="160"></el-table-column>-->
<!--          <el-table-column prop="garbageSource" label="垃圾来源（区域）" align="center"></el-table-column>-->
<!--          <el-table-column prop="garbageType" label="垃圾种类" align="center"></el-table-column>-->
<!--          <el-table-column prop="garbageNumber" label="数量（kg）" align="center" width="140"></el-table-column>-->
<!--          <el-table-column prop="recordingPerson" label="记录人" align="center" width="120"></el-table-column>-->
<!--          <el-table-column label="操作" width="230" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button-->
<!--                type="text"-->
<!--                class="textButton"-->
<!--                icon="el-icon-edit-outline"-->
<!--                @click="openDialog('edit',scope.row)"-->
<!--              ></el-button>-->
<!--              <el-button-->
<!--                type="text"-->
<!--                class="textButton"-->
<!--                style="color:red;"-->
<!--                icon="el-icon-delete"-->
<!--                @click="handleDelete(scope.$index, scope.row)"-->
<!--              ></el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
<!--        <el-pagination-->
<!--          style="margin-top: 10px;float: right"-->
<!--          :page-size="5"-->
<!--          @current-change="reloadPage"-->
<!--          layout="total, prev, pager, next, jumper"-->
<!--          :current-page.sync="currentPage"-->
<!--          :total=total />-->
      </section>
    </section>
<!--    <edit-dialog-->
<!--      :visible-flag='dialogData.visibleFlag'-->
<!--      :data="dialogData.editData"-->
<!--      @close-dialog="closeDialog"/>-->
  </section>
</template>

<script>
import request from '@/network/request'
// import editDialog from './editDialog'
export default {
  components: {
    // editDialog
  },
  props: {
    tableColumn: { type: Array, required: true },
    isIndex: { type: Boolean, default: false },
    isSelection: { type: Boolean, default: false },
    apiPath: { type: String },
    openDialog: { type: Function }
  },
  beforeMount () {
    this.getData()
  },
  data () {
    return {
      dialogData: {
        visibleFlag: false,
        dialogTitle: '新增',
        formType: 'add',
        editData: {}
      },
      tableData: [],
      selectionArr: [],
      loading: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      options: [{
        value: 'Name',
        label: 'Name'
      }, {
        value: 'Grade',
        label: 'Grade'
      }, {
        value: 'Room',
        label: 'Room'
      }],
      dateDuring: '',
      option: '',
      searchInfo: ''
    }
  },
  methods: {
    searchItem () {
      this.staffDemeanorList = []
      request({
        url: `/bulletin/searchstaffmoment?keyword=${this.input}`
      }).then(res => {
        this.staffDemeanorList = res.data.data
        for (var i = 0, len = this.staffDemeanorList.length; i < len; i++) {
          if (this.staffDemeanorList[i].imgs.length !== 0) {
            this.staffDemeanorList[i].src = this.staffDemeanorList[i].imgs[0].imgurl
          } else {
            this.staffDemeanorList[i].src = ''
          }
        }
        // eslint-disable-next-line handle-callback-err,no-unused-vars
      }, error => {
        console.log('error')
      })
    },
    getData () {
      this.loading = true
      // const params = {
      //   pageSize: this.pageSize,
      //   currentPage: this.currentPage,
      //   startTime: null,
      //   endTime: null
      // }
      // if (this.dateDuring !== null && this.dateDuring !== '' && this.dateDuring.length === 2) {
      //   params.startTime = this.dateDuring[0].getTime()
      //   params.endTime = this.dateDuring[1].getTime()
      // }
      request({
        method: 'get',
        url: this.apiPath+'/getAllName',
        // params: params
      }).then((res) => {
        console.log(res.data.data.records)
        this.tableData = res.data.data
        this.total = res.data.data.length
        this.loading = false
      })
    },
    // openDialog (formType, editData = {}) {
    //   this.dialogData = {
    //     visibleFlag: true,
    //     formType,
    //     editData,
    //     dialogTitle: formType === 'add' ? '新增' : '编辑'
    //   }
    // },
    handleDelete (index, row) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    deleteRequest (record) {
      console.log(record)
      request({
        method: 'post',
        url: this.apiPath + '/delete',
        params: {
          name: record.name
        }
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getData()
        } else {
          this.$message.error('删除失败!')
        }
      })
    },
    reloadPage (currentPage) {
      this.currentPage = currentPage
      this.getData()
    },
    closeDialog () {
      this.dialogData.visibleFlag = false
      this.getData()
    }
  }
}
</script>

<style scoped>
</style>
